import { useDispatch, useSelector } from "react-redux";

// 使用钩子函数完成数据分发和使用
function HelloStore() {

    return (
        <div>
            <h1>使用connect</h1>
            <UseStore></UseStore>
            <DispatchStore></DispatchStore>
        </div>
    )

}

function DispatchStore() {

    const dispatch = useDispatch();

    return (
        <div>
            <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
            <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
        </div>
    )
}

function UseStore() {

    const count = useSelector((state) => state);

    return (
        <div>
            <h2>useSelector</h2>
            <p>{count}</p>
        </div>
    )
}


export default HelloStore;